<template>
  <section class="hz-filter-box HzSearch" id="pageSearch">
    <!--title-->
    <div class="hz-filter-title" v-if="title">
      <div>{{title}}</div>
      <div class="hz-filter-title_btn color-blue">
        <!-- 操作区 -->
        <slot name="action">
          <span
            v-for="(item, index) in showActionData"
            :key='index'
          >
            <span
                v-if="!item.tip"
                :class="item.iconObj"
                @click="()=> {item.handleClick()}">{{item}}</span>
            <el-tooltip v-else class="item" effect="dark" :content="item.tip" placement="top-start">
                <span
                    :class="item.iconObj"
                    @click="()=> {item.handleClick()}"
                ></span>
            </el-tooltip>

          </span>
        </slot>
        <div
          class="hz-filter-title_item"
          v-show="filterOpened && havuSearch"
          @click="changFilterOpened"
        >
          <span class="txt">收起筛选</span>
          <span class="icon el-icon-arrow-up"></span>
        </div>
        <div
          class="hz-filter-title_item"
          v-show="!filterOpened"
          @click="changFilterOpened"
        >
          <span class="txt">打开筛选</span>
          <span class="icon el-icon-arrow-down"></span>
        </div>
      </div>
    </div>

    <!--筛选内容-->
    <el-collapse-transition>
      <div v-show="filterOpened && havuSearch">
        <slot v-show='filterOpened'></slot>
        <el-row :gutter="18" style="text-align: right; height: 42px">
          <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-row>
      </div>
    </el-collapse-transition>
  </section>
</template>

<script>
export default {
  name: 'HzSearch',
  props: {
    havuSearch: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    labelWidth: {
      type: String,
      default: () => {
        return '70px'
      }
    },
    actionData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    showActionData: function () {
      return this.actionData.reduce((total, cruVal) => {
        if (cruVal.auth()) {
          total.push({
            ...cruVal,
            iconObj: {
              'hz-filter-title_item': true,
              icon: true,
              [cruVal.icon]: true
            }
          })
        }
        return total
      }, [])
    }
  },
  data () {
    return {
      filterOpened: true
    }
  },
  methods: {
    changFilterOpened () {
      this.$root.$emit('$changeSearchShowState')
      this.filterOpened = !this.filterOpened
    },
    handleSearch () {
      this.$emit('search')
    },
    handleReset () {
      this.$emit('reset')
    }
  }
}
</script>

<style lang="scss" scoped>
.hz-search {
  width: 100%;
  background: rgba(250, 250, 250, 1);
  border-radius: 4px;
  min-height: 40px;
}
.color-blue{
  color: $blue;
}
</style>
